<%@page contentType="text/html;charset=UTF-8"%>
<!doctype html>
<html>
<head>
<%@ include file="/include/taglibs.jsp"%>
<%@ include file="/include/meta.jsp"%>
<script src="${ctx}/plug/jtopo/topotools/require/jtopo-0.4.8-min.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/plug/jtopo/topotools/css/index.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/plug/jtopo/topotools/css/menu.css"/>
<script src="${ctx}/plug/jtopo/topotools/require/Map.js"></script>
<script src="${ctx}/plug/jtopo/topotools/require/Math.uuid.js"></script>
<script src="${ctx}/plug/jtopo/topotools/js/tools-core.js"></script>
<script src="${ctx}/plug/jtopo/topotools/js/tools-core3.js"></script>
<script src="${ctx}/plug/jtopo/topotools/js/tools-core2.js"></script>
<script src="${ctx}/plug/jtopo/json.js"></script>
<script>
    var RENDER_MAP = new Map_();
    var leftX = 47;
    $(document).ready(function () {
        var canvas = document.getElementById('leftCanvas__');
        var stage = new JTopo.Stage(canvas);
        var scene = new JTopo.Scene();
        scene.mode = 'select';
        scene.areaSelect = false;
        stage.add(scene);
        for (var i = 0; i < menuJson.length; i++) {
            var jsonNode = menuJson[i];
            var node = createModel(jsonNode);
            RENDER_MAP.put(jsonNode.c_Id, jsonNode);
            var s = 10 + i * 65;
            if (s == 10) {
                s = 18;
            }
            node.setLocation(leftX, s);
            scene.add(node);
        }
    });
</script>
</head>
<body class="easyui-layout">  
    <div data-options="region:'east',iconCls:'icon-reload',title:'图元列表',split:true" style="width:160px;">
    	<canvas width='125' height='785' id='leftCanvas__'></canvas>
    </div>  
    <div data-options="region:'west',title:'组态工程',split:true" style="width:200px;">
    	
    </div>  
    <div data-options="region:'center',title:'页面',tools: [{   
        iconCls:'icon-add',   
        handler:function(){saveJson();$('#getjson').dialog('open'); }   
    }]" >
    	<canvas width='1205' height='696' style="border:1px solid #808080" id='canvas__'></canvas>
<div id="content"></div>
<textarea id="jtopo_textfield" style="display:none;width: 60px;position: absolute;"
          onkeydown="if(event.keyCode==13)this.blur();"></textarea>
<ul id="contextmenu" style="display:none;font-size:12px">
    <li><a>开始连线</a></li>
    <li><a>设置成告警</a></li>
    <li><a>清除告警</a></li>
    <li><a>顺时针旋转</a></li>
    <li><a>逆时针旋转</a></li>
    <li><a>放大</a></li>
    <li><a>缩小</a></li>
    <li><a>删除该节点</a></li>
</ul>

<ul id="contextmenu2" style="display:none;font-size:12px">
    <li><a>设置成红色</a></li>
    <li><a>设置成蓝色</a></li>
    <li><a>删除连线</a></li>
</ul>

<div id="jsonContext" style="width:700px;height:700px;display:none;font-size:12px">

</div>
    </div>  
    <div id="getjson" class="easyui-dialog" title="页面数据" style="width:600px;height:400px;"  
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:[{
				text:'Save',
				handler:function(){
				 	var jsons=eval(document.getElementById('theJson').value);
					renderToPo(jsons); 
				}
			}]">  
    	<textarea id="theJson" style="width:100%;height:300px;"></textarea>
    </div>
</body>  
<script>
    var stage;
    var scene;
    $(document).ready(function () {
        var canvas = document.getElementById('canvas__');
        stage = new JTopo.Stage(canvas);
        scene = new JTopo.Scene();
        scene.background = '${ctx}/plug/jtopo/topotools/images/bg21.jpg';
        stage.add(scene);
        scene.mode = 'select';
        scene.areaSelect = false;
        initDBClick();
        initRightButton();
    });
</script>
</html>
